<template>
  <div class="mainMenu">
    <el-menu :default-active="tagCurrent.value" router mode="horizontal" background-color="#39A4ED" text-color="#fff" active-text-color="#fff">
      <el-menu-item v-for="item in menuList" :key="item.id" :index="item.request" @click="getThisPageActionId(item)">{{item.name}}</el-menu-item>
    </el-menu>
  </div>
</template>
<script>
import { mapState } from "vuex";
export default {
  name: "mainMenu",
  components: {
  },
  data() {
    return {};
  },
  computed: {
    ...mapState({
      tagCurrent: (state) => state.tag.tagCurrent,
      menuList: (state) => state.common.menuList,
    }),
  },
  methods: {
    getThisPageActionId(navItem) {
      if (navItem.Children) {
        this.$router.push({ path: navItem.Children[0].request });
      }
      if (navItem.name != '审批云') { // 审批云无需btn权限
        this.$store.dispatch('GetActionId', navItem.Children ? navItem.Children[0].id : navItem.id);
      }
    },
  },
  created() {
  },
};
</script>
<style lang="less" scope>
.mainMenu {
  height: 100%;
  display: inline-block;
  margin-left: 15px;
  .el-menu {
    border: none;
    height: 100%;
    .el-menu-item {
      border: none;
      height: 100%;
      display: flex;
      align-items: center;
    }
    .is-active {
      // background-color: rgb(79, 124, 223)!important;
    }
  }
}
</style>
